<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>smartCheckbox demo</title>
        <link rel="stylesheet" type="text/css" href="jquery.smartcheckbox-0.3.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.smartcheckbox-0.3.js"></script>
        <script type="text/javascript" src="jquery.smarttreecheckbox-0.1.js"></script>
        <script type="text/javascript">
        //<!--
            $(document).ready(function() {
                $('.school input[type=checkbox]').smartCheckbox({
                    onCheck: {
                        2: { check: '1' },
                        3: { check: '1,2' },
                        4: { check: '1,2,3' },
                        5: { check: '1,2,3,4' }
                    },
                    onUncheck: {
                        1: { uncheck: '2,3,4,5' },
                        2: { uncheck: '3,4,5' },
                        3: { uncheck: '4,5' },
                        4: { uncheck: '5' }
                    },
                    attribute: 'value',
//                    container: 'demo1'
                });

                $('.school_cascade input[type=checkbox]').smartCheckbox({
                    cascade: true,
                    onCheck: {
                        2: { check: '1' },
                        3: { check: '2' },
                        4: { check: '3' },
                        5: { check: '4' }
                    },
                    onUncheck: {
                        1: { uncheck: '2' },
                        2: { uncheck: '3' },
                        3: { uncheck: '4' },
                        4: { uncheck: '5' }
                    },
                    attribute: 'value'
                });

                $('.remote input[type=checkbox]').smartCheckbox({
                    onCheck: {
                        1: { url: 'server.html' },
                    },
                    attribute: 'value'
                });
          
                $('#tree').smartTreeCheckbox({
                    checkParents: true,
                    checkChildren: true,
                    collapsable: true,
                    collapsed: false
                });
            });
        //-->
        </script>
    </head>
    <body>
        <a href="https://code.google.com/p/smartcheckbox/">Project Home</a>
        <hr>
        <table border="1">
            <caption>smartCheckbox demo</caption>
            <tr>
                <td>
                    <form class="school">
                        Select your school level<br />
                        <input type="checkbox" value="1">Elementary<br />
                        <input type="checkbox" class="disturbingClass" value="2">Middle<br />
                        <input type="checkbox" value="3">High<br />
                        <input type="checkbox" value="4">Post-secondary<br />
                        <input type="checkbox" value="5">Graduate<br />
                    </form>
                <td>
                    <form class="school_cascade">
                        Select your school level (cascade option)<br />
                        <input type="checkbox" value="1">Elementary<br />
                        <input type="checkbox" value="2">Middle<br />
                        <input type="checkbox" value="3">High<br />
                        <input type="checkbox" value="4">Post-secondary<br />
                        <input type="checkbox" value="5">Graduate<br />
                    </form>
                <td>
                    <form class="remote">
                        Fetch list from remote server<br />
                        <input type="checkbox" value="1">Check Nodes 3,5; Uncheck Nodes 2,4<br />
                        <input type="checkbox" value="2" checked>Node 2<br />
                        <input type="checkbox" value="3">Node 3<br />
                        <input type="checkbox" value="4" checked>Node 4<br />
                        <input type="checkbox" value="5">Node 5<br />
                    </form>
        </table>
        <table border="1">
            <caption>smartTreeCheckbox demo</caption>
            <tr>
                <td>
                    <p>collapse: true</p>
                    <ul id="tree">
                        <li><input type="checkbox">Root
                        <ul>
                            <li><input type="checkbox">Node 1
                            <ul>
                                <li><input type="checkbox">Node 1.1
                            </ul>
                        </ul>
                        <ul>
                            <li><input type="checkbox">Node 2
                            <ul>
                                <li><input type="checkbox">Node 2.1
                                <li><input type="checkbox">Node 2.2
                                <li><input type="checkbox">Node 2.3
                                <ul>
                                    <li><input type="checkbox">Node 2.3.1
                                    <li><input type="checkbox">Node 2.3.2
                                </ul>
                                <li><input type="checkbox">Node 2.4
                                <li><input type="checkbox">Node 2.5
                                <li><input type="checkbox">Node 2.6
                            </ul>
                        </ul>
                    </ul>

        </table>
    </body>
</html>
